<template>
	<div class="quchu">
		<!-- <router-view v-slot="{ Component }">
			<transition name="ranimate">
				<component :is="Component" />
			</transition>
		</router-view> -->
		<router-view v-slot="{ Component }">
			<!-- false为页面缓存true为不缓存 -->
			<div v-if="!route.meta.keepAlive">
				<transition name="ranimate">
					<keep-alive>
						<component :is="Component" :key="route.meta.name"></component>
					</keep-alive>
				</transition>
			</div>
			<transition name="ranimate">
				<component :is="Component" v-if="route.meta.keepAlive" :key="route.meta.name"></component>
				<!-- </keep-alive> -->
			</transition>
		</router-view>
		<!-- <router-view></router-view> -->
	</div>
</template>

<script setup>
	import { ref } from "vue";
	import router from "@/router/index.js";
	import { useRoute } from "vue-router";
	const route = useRoute();
	let meta = ref(true);
	let name = ref("");
	// meta.value = route.meta.keepAlive;
	// name.value = route.meta.name;
	router.beforeEach((to, from, next) => {
		// to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
		meta.value = to.meta.keepAlive;
		name.value = to.meta.name;
		next();
	});
	// console.log(meta.value, "9999999999999");
</script>
<style lang="scss">
	* {
		box-sizing: border-box !important;
	}
	::-webkit-scrollbar {
		/*隐藏滚轮*/
		display: none;
	}
	img {
		object-fit: scale-down;
	}
	.el-tabs__item {
		font-weight: 600 !important;
	}
	// .ranimate-enter-active {
	// 	animation: bounceInLeft 1s;
	// }

	// .ranimate-leave-active {
	// 	animation: slideOutLeft 0.5s;
	// }

	// .el-loading-spinner .el-loading-text {
	// 	// color: #fff !important;
	// 	color: #000 !important;
	// 	margin-top: 10px;
	// }
	// .el-loading-spinner .path {
	// 	// stroke: #fff !important;
	// 	stroke: #000 !important;
	// }
</style>
